<template>
	<view class="loginBox">
		<view class="inpBox">
			<view class="box-title">
				手机号码
			</view>
			<u-input class="inp" v-model="phone" placeholder='请输入手机号码' />
			<view class="box-title">
				验证码
			</view>
			<view class="yzm">
				<u-input class="inp" v-model="code" placeholder='请填写验证码' />
				<u-button class="btn" type="primary" :disabled="disabled" @click="getCode"
					text="验证码">{{countDownSeconds=="验证码"?countDownSeconds:countDownSeconds+"s"}}</u-button>
			</view>
			<view class="box-title">
				设置密码
			</view>
			<u-input class="inp" type='password' v-model="password" placeholder='请输入密码' />
		</view>

		<view class="btns">
			<u-button class="btn" @click="getGister">确定修改</u-button>
		</view>
	</view>

</template>

<script>
	import {
		editPassword,
		yzmCode
	} from "@/api/index.js"
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				phone: '',
				email: '',
				password: '',
				username: '',
				code: '',
				countingDown: false,
				countDownSeconds: '验证码',
				disabled: false,
				p_key: ''
			}
		},
		onLoad() {
			this.p_key = uni.getStorageSync("p_key")
		},
		methods: {
			//验证码
			getCode() {
				let params = {
					phone: this.phone,
					key: CryptoJS.MD5(this.phone + "_lingjiamao").toString(),

				}
				let regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				yzmCode(params).then(res => {
					if (res.code == 1) {
						this.startCountDown();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			startCountDown() {
				this.disabled = true
				this.countingDown = true;
				this.countDownSeconds = 59
				const timer = setInterval(() => {
					if (this.countDownSeconds > 0) {
						this.countDownSeconds--;
					} else {
						this.countingDown = false;
						this.countDownSeconds = '验证码';
						this.disabled = false
						clearInterval(timer);
					}
				}, 1000);
			},
			getGister() {
				let regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.password && this.password.length < 6) {
					uni.showToast({
						title: '请输入至少六位新密码',
						icon: 'none'
					})
					return
				}
				let params = {
					mobile: this.phone,
					password: this.password,
					code: this.code,
				}
				editPassword(params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改密码成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)


					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goLoginFn() {
				uni.navigateTo({
					url: '/pages/login/login'
				})


			}
		}
	}
</script>

<style scoped lang="scss">
	.loginBox {
		padding: 0 64rpx;
		padding-top: 48rpx;

		.title {
			font-family: Alimama ShuHeiTi;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 56rpx;
			letter-spacing: 0rpx;
			text-align: left;
			color: #262626;
			margin-top: 34rpx;

			.title2 {
				font-family: PingFang SC;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				letter-spacing: 0rpx;
				text-align: left;
				color: #8C8C8C;
				margin-top: 16rpx;

			}
		}

		.box-title {
			font-size: 26rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.inpBox {
			margin-top: 56rpx;

			.inp {
				background: #F7F8FA;
				padding: 16rpx 56rpx !important;
				margin-bottom: 24rpx;
				border-radius: 16rpx;
			}
		}

		.forget {
			color: #FA430E;
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0rpx;
			text-align: left;
			text-decoration: underline;
		}

		.btns {
			margin-top: 88rpx;

			.btn {
				font-size: 32rpx;
				color: #fff;
				background: #FE430E !important;
				border-radius: 16rpx;
			}
		}

		.tips {
			color: #8C8C8C;
			font-size: 26rpx;
			text-align: center;
			margin-top: 28rpx;

			.reg {
				color: #FA430E;
			}
		}
	}

	.yzm {
		display: flex;
		align-items: center;

		.btn {
			width: 150rpx;
			margin-bottom: 24rpx;
			margin-left: 100rpx;
		}
	}
</style>